<template>
    <view class="tarbar">
        <view
            class="tarbar-list"
            :style="{
                background: tabBar.backgroundColor,
                color: tabBar.color,
                'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
                'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0
            }"
        >
            <view class="tarbar-list-ul">
                <view class="tarbar-list-li" :class="tarbar-list-li-center" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
                        
                        <view class="tarbar-list-li-icon"><image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image></view>
                        <view class="tarbar-list-li-name">{{ item.text }}</view>
                   
                </view>
            </view>
        </view>
        <block v-if="isShowMask"><release-popup @close-mask="closeMask"></release-popup></block>
    </view>
</template>

<script>
export default {
    props: ['selected'],
    data() {
        return {
            tabBar: {
                color: '#ccc',
                selectedColor: '#E84351',
                borderStyle: '#ccc',
                backgroundColor: '#fff',
                position: 'bottom',
                list: [
                    {
                        pagePath: '/pages/signin/signin',
                        iconPath: '/static/images/tabbar_new/qian.png',
                        selectedIconPath: '/static/images/tabbar_new/qian_1.png',
                        text: '签到'
                    },
                    {
                        pagePath: '/pages/signin/signinmy',
                        iconPath: '/static/images/tabbar_new/gong.png',
                        selectedIconPath: '/static/images/tabbar_new/gong_1.png',
                        text: '我的'
                    },
                    {
                        pagePath: '/pages/signin/signinstatistics',
                        iconPath: '/static/images/tabbar_new/sou.png',
                        selectedIconPath: '/static/images/tabbar_new/sou_1.png',
                        text: '统计'
                    },
                    {
                        pagePath: '/pages/signin/signinsetting',
                        iconPath: '/static/images/tabbar_new/she.png',
                        selectedIconPath: '/static/images/tabbar_new/she_1.png',
                        text: '设置'
                    }
                ]
            },
            oldSelected: 0, // 记录之前访问的索引; 值为2的时候显示遮罩
            isShowMask: false
        };
    },
    onLoad() {
		console.log(this.index)
	},
    methods: {
        setSelected(index) {
            console.log(index);
            uni.navigateTo({
                url: this.tabBar.list[index].pagePath
            });
            this.$forceUpdate();
        },
        closeMask() {
            this.isShowMask = false;
        }
    }
};
</script>

<style>
.tarbar {
    width: 100%;
    z-index: 9999;
    position: fixed;
}
.tarbar-list {
    width: 100%;
    height: 120upx;
    background: #4d586f;
    position: fixed;
    left: 0;
    bottom: 0;
}
.tarbar-list-ul {
    width: 100%;
    height: 100%;
    padding: 20upx 50upx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
.tarbar-list-li {
    width: 80upx;
    height: 80upx;
}
.tarbar-list-li-icon {
    width: 50upx;
    height: 50upx;
    margin: 0 auto;
}
.tarbar-list-li-icon image {
    width: 50upx;
    height: 50upx;
}
.tarbar-list-li-name {
    width: 100%;
    text-align: center;
    line-height: 30upx;
    font-size: 20upx;
    height: 30upx;
}
.tarbar-list-li-center {
    width: 100upx;
}
.tarbar-list-li-center .tarbar-list-li-icon,
.tarbar-list-li-center .tarbar-list-li-icon image {
    width: 90upx;
    height: 60upx;
}
</style>